<template>
  <div class="item-top">
    <AElTable :data="data" :columns="columns" max-height="250" highlight-current-row fixed>
      <AElPagination slot="pagination" :pageSize="pageSize" @change="change" />
    </AElTable>
  </div>
</template>

<script>
import moment from 'moment';
export default {
  name: 'ExpenseBottom',
  data() {
    return {
      data: [], // 表格数据
      columns: [], // 表格行配置项
      pageSize: { page: 1, size: 10, total: 0 }, // 分页配置
    }
  },
  created() {
    this.setClumnsConfig();
  },
  methods: {
    /**
     * 配置表格行
     */
    setClumnsConfig() {
      this.columns = [
        {
          lable: "序号",
          type: "selection"
        },
        {
          label: "姓名",
          prop: "xm"
        },
        {
          label: "收费",
          prop: "chargeStates",
          render: ({ row }) => {
            switch (row.chargeStates) {
              case 0: return <span style="color:red">未收费</span>
              case 1: return <span>已收费</span>
              default: return null
            }
          }
        },
        {
          label: "状态",
          prop: "reservationStates",
          render: ({ row }) => {
            switch (row.reservationStates) {
              case 0: return <span style="color:green">未预约</span>
              case 1: return <span>已预约</span>
              default: return null
            }
          }
        },
        {
          label: "预约时间",
          prop: "reservationTime",
          formatter: ({ row }) => moment(row.reservationTime).format('YYYY-MM-DD HH:mm:ss')
        },
        {
          label: "预约医生",
          prop: "reservationDoctor"
        },
        {
          label: "执行时间",
          prop: "exeTime",
          formatter: ({ row }) => moment(row.exeTime).format('YYYY-MM-DD HH:mm:ss')
        },
        {
          label: "执行医生",
          prop: "exeDoctor"
        }
      ]
    },
    /**
     * 分页数据改变事件
     */
    change(data) {
      this.pageSize = { ...this.pageSize, ...data };
      // this.getData();
    },
  }
}
</script>

<style lang="less" scoped></style>